<template>
  <view class="page" v-if='isShow'>
    <!-- 图片广告 -->
	<view class="ad_pic" v-if="adType == 1" @click='goAdDetail'>
		<fu-image :src="pic" mode="aspectFill"></fu-image>
	</view>
    <view v-if="adType == 1" @click="jump" class="cu-btn round jump">
      <text class="text-sm" v-if='jumpTime'>{{i18n['跳过']}}：<text class="text-sm"> {{ jumpTime }}</text> s</text>
    </view>
    <!-- 视频广告 -->
    <video v-if="adType == 2" class="ad_video" :src="video" :autoplay='true' :muted='isSound' :loop='false' @click='goAdDetail'
      :direction='0' :controls='false' :show-center-play-btn='false' :enable-progress-gesture='false'
      :vslide-gesture-in-fullscreen='false' @error="playError" @play='playStart' @ended='ended' object-fit='cover'>
      <cover-view @click.stop="jump" class="cu-btn round cover-text jump">{{i18n['跳过']}}</cover-view>
      <cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/off.png'" @click='offSound' v-if='isSound'>
      </cover-image>
      <cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/on.png'" @click='onSound' v-if='!isSound'>
      </cover-image>
    </video>
  </view>
</template>

<script>
  let isAd;
  export default {
    name: 'Ad',
    data() {
      return {
				imgWechatUrl: this.imgWechatUrl,
        isSound: true,
        isShow: false, // 显示
        jumpTime: null, // 倒计时时间
        jumpUrl: '', // 广告跳转链接
        timer: null, // 计时器
        adType: 1, // 广告类型，控制显示哪一种
        pic: '',
        video: '',
      }
    },
    onLoad() {
      this.setNavigationBarTitle(this.i18n['广告页'])
      isAd = uni.getStorageSync('AD_INFO');
      if (!isAd) {
        uni.reLaunch({
          url: '/pages/index/launch/launch-page/index'
        })
        return
      }
      // 获取数据 广告类型
      this.$api.post(global.apiUrls.postOperationGetAds, {
        typeid: 12
      }).then(res => {
        if (res.data.code == 1) {
          this.isShow = true
          // 判断视频或者图片广告页
          console.log('广告页数据', res.data.data)
          // 空数据，不显示，隐藏广告页功能
          if (res.data.data.length == 0) return this.jump()
          let flag = false
          res.data.data.forEach((item, index) => {
            if (item.type == 2) {
              this.video = item.video
              this.adType = 2
              if (item.href) {
                this.jumpUrl = item.href
              }
              flag = true
            }
          });
          // 判断视频不存在，展示图片广告页
          if (!flag) {
            this.adType = 1;
            this.pic = res.data.data[0].thumb
            this.jumpTime = 5
            if (res.data.data[0].href) {
              this.jumpUrl = res.data.data[0].href
            }
            // 开启计时器
            setTimeout(() => {
              this.countDown();
            }, 500)
          }
        }
      }).catch(err => {
        console.log("没有广告数据",err);
        this.jump();
      })
    },
    // 监听页面卸载
    onUnload() {
      // 关闭计时器
      if (this.adType != 2) {
        clearInterval(this.timer);
      }
    },
    methods: {
      // 跳转广告页详情
      goAdDetail() {
        console.log(this.jumpUrl)
        uni.setStorageSync('ad_jumpUrl', this.jumpUrl);
        uni.switchTab({
          url: '/pages/tab/home/shopindex/index'
        })
        // 回首页记录首页地址
        // uni.reLaunch({ url: this.jumpUrl })
      },
      // 声音操作
      onSound() {
        this.isSound = true
        console.log(this.isSound)
      },
      offSound() {
        this.isSound = false
        console.log(this.isSound)
      },
      // 视频播放结束
      ended() {
        console.log('页面跳转')
        uni.switchTab({
          url: '/pages/tab/home/shopindex/index'
        })
      },
      // 倒计时
      countDown() {
        this.timer = setInterval(() => {
          this.jumpTime--;
          if (this.jumpTime <= 0) {
            this.jump();
          }
        }, 1000);
      },
      // 页面跳转
      jump() {
        console.log('页面跳转')
        clearInterval(this.timer);
        uni.switchTab({
          url: '/pages/tab/home/shopindex/index'
        })
      },
      // 播放失败
      playError(e) {
        console.log('播放失败', e)
      },
      // 开始播放
      playStart(e) {
        console.log('开始播放')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    width: 100%;
    height: 100vh;

    .ad_pic {
      position: absolute;
      width: 100%;
      height: 100vh;
    }

    .ad_video {
      position: absolute;
      width: 100%;
      height: 100vh;
    }

    .jump {
      position: absolute;
      z-index: 99;
      top: 60rpx;
      right: 24rpx;
    }

    .cover-image-sound {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      z-index: 99;
      top: 60rpx;
      left: 40rpx;
    }

    /* #ifdef APP-PLUS */
    .jump {
      top: 120rpx;
    }

    .cover-image-sound {
      top: 120rpx;
    }

    .cover-text {
      width: 200rpx;
      height: 50rpx;
      text-align: center;
      line-height: 45rpx;
    }

    /* #endif */
  }
</style>
